<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="handleGoBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->

    <view class="content u-page">
      <view class="row">
        <view class="title">三岗联动完成情况</view>
      </view>

      <view class="row" style="justify-content: center">
        <u-button type="primary" shape="circle" style="margin: 0 10rpx">
          {{ orgName }}
        </u-button>
        <u-button
          type="primary"
          shape="circle"
          @click="handleYearMonthClick"
          style="margin: 0 10rpx"
        >
          {{ currYearMonthStr }}
        </u-button>
      </view>

      <u-picker
        v-if="yearMonthSelShow"
        mode="time"
        v-model="yearMonthSelShow"
        :default-time="year + '-' + month"
        :params="timeParams"
        @confirm="handleYearMonthConfig"
      ></u-picker>

      <view class="table-wrap">
        <view class="list">
          <view class="list-header">
            <view class="row">
              <view class="col" style="text-align: center">三岗联动数</view>
              <view class="col" style="text-align: center">已完成</view>
              <view class="col" style="flex: 2; text-align: center">
                完成进度
              </view>
            </view>
          </view>
          <view class="list-body">
            <view class="row" v-for="(item, index) of list" :key="index">
              <view class="col" style="text-align: center">
                {{ item.total }}
              </view>
              <view class="col" style="text-align: center">
                {{ item.done }}
              </view>
              <view class="col" style="flex: 2">
                <view style="color: #2979ff; text-align: center">
                  {{ item.percentage }}%
                </view>
                <u-line-progress
                  active-color="#2979ff"
                  :percent="item.percentage"
                  :show-percent="false"
                ></u-line-progress>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import threePostsJointActionService from "@/service/threePostsJointAction/threePostsJointAction.service.js";

export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      list: [],
      year: "",
      month: "",
      yearMonthSelShow: false,
      timeParams: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      orgName: "",
      orgUuid: "",
    };
  },
  computed: {
    currYearMonthStr() {
      return this.year + "年" + this.month + "月";
    },
  },
  onLoad(options) {
    // let date = new Date();
    // let currYear = date.getFullYear();
    // let currMonth = date.getMonth();
    // let currMonthStr =
    //   currMonth + 1 > 9 ? currMonth + 1 : "0" + (currMonth + 1);
    // this.year = currYear;
    // this.month = currMonthStr;

    this.orgUuid = options.orgUuid,
    this.orgName = options.orgName.replace(/烟草专卖局/g, "");
    let dateArr = options.month.split("-");
    this.year = dateArr[0];
    this.month = dateArr[1];


    this.getListData();
  },
  methods: {
    // 获取统计列表
    getListData() {
      this.$modal.showLoading("数据加载中...");
      threePostsJointActionService
        .getJointActionTaskInfo({
          page: 1,
          limit: 99,
          orgUuid: this.orgUuid,
          taskDate: this.year + "-" + this.month,
        })
        .then((res) => {
          this.$modal.hideLoading();
          if (res.success) {
            this.list = res.data;
          } else {
            this.$u.toast(res.msg);
          }
        })
        .catch(() => {
          this.$u.toast("数据加载失败!");
          this.$modal.hideLoading();
        });
    },
    handleYearMonthClick() {
      this.yearMonthSelShow = true;
    },
    handleYearMonthConfig(e, index) {
      this.year = e.year;
      this.month = e.month;
      this.getListData();
    },
    handleGoBack() {
      // if (this.userInfo.orgLevel >= 3) {
      //   this.$u.route({
      //     url: "/pages/dashboard/dashboard"
      //   });
      // } else {
      //   this.goBack();
      // }
      this.goBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
}

.u-tr .u-td {
  font-size: 24rpx !important;
}

.list-header {
  font-weight: 600;
}

.list-header .row .col,
.list-body .row .col {
  flex: 1;
}

.list-body .row {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  margin: 0 0;
  font-size: 26rpx;
}
</style>